<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>{{'admin|admin_site_name'|C|default:'管理后台登录'}}</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<script src="{{$smarty.const.__SHARE__}}js/jquery-1.8.3.min.js" type="text/javascript"></script>
{{include file="{{$smarty.const.PLUG}}killie/killie.html"}}
<script src="{{$smarty.const.__SHARE__}}js/jquery.cookie.min.js" type="text/javascript"></script>
<link href="{{$smarty.const.__APP__}}style/app.css" rel="stylesheet" type="text/css" />
<link href="{{$smarty.const.__APP__}}style/login.css" rel="stylesheet" type="text/css" />
{{include file="{{$smarty.const.PLUG}}colorbox/colorbox.html"}}
{{include file="{{$smarty.const.PLUG}}alertUi/alertUi.html"}}
<script>
/**
 * login function
 */
function login(){
	var username = $("#username").val();
	var password = $("#password").val();
	var verify = $("#verify").val();

	$("#msg").css("display", "block");
	$("#msg").html("正在登录中，请稍等...");
	$.post("index.php?app=public&act=login", {username: username, password: password, verify: verify},
		function(obj){
			if(obj.statusCode == 200){
				ui.success(obj.message);//syslogin
				if('{{$smarty.get.url}}'=='') var url = "{{$smarty.const.__ROOT__}}";
				else var url = '{{$smarty.get.url}}'; 
				document.location.href = url;//登录后跳转页面
			}else{
				ui.alert(obj.message);
				$("#verifyCodeImg").click();
				$("#verify").val("");
			}
		}
	,'json');
	//将当前登录用户名记cookie
  	$.cookie('username',$('input[name=username]').val());
}

$(function(){
	$("#username").keyup(function(event){
		if(event.keyCode == 13) $("input[name='password']").focus();
	}); 
	
	$("#password").keyup(function(event){
		if(event.keyCode == 13) $("input[name='verify']").focus();
	}); 
	
	$("#verify").keyup(function(event){
		if(event.keyCode == 13)	login();
 	});

	//读取cookie
	$('#username').val($.cookie('username'));
});
</script>
<script>
$(function(){
    $('#qq').click(function(event){
    	window.open('{{$qq_url}}','','width=600,height=600,left=10, top=10,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes');
    });
});
</script>
</head>
<body>

<div class="container login">
	<div class="loginbox">
		<!-- <center>
			<div class="login_item">
				<img src="{{$smarty.const.__APP__}}images/login1.png" alt="">
			</div>
		</center> -->
		
			<div class="lghead">
				管理后台登录
			</div>
			<div class="login_wrap">
				<span class="icon">
					<img src="{{$smarty.const.__APP__}}images/login/login.png" alt="">
				</span>
				<div class="input_text">
					<input type="text" id="username" name="username" placeholder="请输入用户名">
				</div>
			</div>
			<div class="login_wrap">
				<span class="icon">
					<img src="{{$smarty.const.__APP__}}images/login/pw.png" alt="">
				</span>
				<div class="input_text">
					<input type="password" id="password" name="password" placeholder="请输入密码">
					<b class="tp-btn btn-off"></b>
				</div>
			</div>	
			<div class="login_wrap">
				<span class="icon" style='margin-top:-0.8rem;'>
					<img src="{{$smarty.const.__APP__}}images/login/2code.png" alt="">
				</span>
				<div class="input_text">
					<input id="verify" name="verify" type="text" placeholder="请输入验证码" class='verify'>
					<span id="captcha-img"><img src="{{$smarty.const.__PUB__}}admin/index.php?app=Public&act=getVerifyCode" id="verifyCodeImg" onclick="this.src+='&' + Math.random();" alt="" width="120" height="48" /></span>
				</div>
			</div>	
			<div class="loginbtn">
				<a class='btn-login' href="javascript:" onClick="login();">登录</a>
			</div>
			{{if $show_oauth}}
			<div class="other">
				<div class="item_n"><span>第三方账号登录</span></div>
				<div class="type">
					<a href="javascript:;" id='qq' ><i class="qq"></i><span>QQ登录</span></a>
					<a href="{{$weixin_url}}" class="iframe" width="410" height="420"><i class="weixin"></i><span>微信登录</span></a>
					<a href="{{$sina_url}}" class="iframe" width="600" height="350" ><i class="sina"></i><span>微博登录</span></a>
				</div>
			</div>
			{{/if}}
	</div>
</div>

<canvas id="myCanvas" style="background-color:#00b2ff;overflow:hidden;"></canvas>
<script type="text/javascript">
	//后台登录页面背景canvas动画
    var canvasPage3 = document.getElementById("myCanvas");
    canvasPage3.width = $(window).width();
    canvasPage3.height = $(window).height();
    var ctx = canvasPage3.getContext("2d");
    var zhongX = 800;
    var zhongY = 385;
    function randomNum(x,y){
        return Math.floor(Math.random() * (y - x + 3) + x);
    }

    function randomColor() {
        return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
    }

    function Ball() {
        this.r = randomNum(0.1, 3);
        this.color = "#f5f5f5";

        this.x = randomNum(this.r, canvasPage3.width - this.r);
        this.y = randomNum(this.r, canvasPage3.height - this.r);

        this.speedX = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
        this.speedY = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
    }

    Ball.prototype.move = function () {
        this.x += this.speedX*0.2;
        this.y += this.speedY*0.2;

        if(this.x<=this.r)
        {
            this.x = this.r;
            this.speedX *= -1;
        }
        if(this.x>=canvasPage3.width -this.r)
        {
            this.x = canvasPage3.width - this.r
            this.speedX *= -1;
        }
        //小球碰到上边界的处理 反弹
        if (this.y <= this.r) {
            this.y = this.r;
            //反弹
            this.speedY *= -1;
        }
        //小球碰到下边界的处理 反弹
        if (this.y >= canvasPage3.height - this.r) {
            this.y = canvasPage3.height - this.r;
            //反弹
            this.speedY *= -1;
        }
    }

    Ball.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
    }

    var balls = [];
    var arr = [];
    for(var i = 0; i < 0.0002 * canvasPage3.width * canvasPage3.height; i++) {
        var ball = new Ball();
        balls.push(ball);
    }

    function actionTo(){
        arr = [];
        ctx.clearRect(0, 0, canvasPage3.width, canvasPage3.height);
        for (var i = 0; i < balls.length; i++) {
            balls[i].move();
            balls[i].draw();
            if (ballAndMouse(balls[i]) < 130) {
                ctx.lineWidth = (130 - ballAndMouse(balls[i])) * 1.5 / 130;
                ctx.beginPath();
                ctx.moveTo(balls[i].x, balls[i].y);
                ctx.lineTo(zhongX, zhongY);
                ctx.strokeStyle = balls[i].color;
                ctx.stroke();
            }
        }
        for (var i = 0; i < balls.length; i++) {
            for (var j = 0; j < balls.length; j++) {
                if (ballAndBall(balls[i], balls[j]) < 80) {
                    ctx.lineWidth = (80 - ballAndBall(balls[i], balls[j])) * 0.6 / 80;
                    ctx.globalAlpha = (130 - ballAndBall(balls[i], balls[j])) * 1 / 80;
                    ctx.beginPath();
                    ctx.moveTo(balls[i].x, balls[i].y);
                    ctx.lineTo(balls[j].x, balls[j].y);
                    ctx.strokeStyle = balls[i].color;
                    ctx.stroke();
                }
            }
        }
        ctx.globalAlpha = 1.0;
    }

    //定时器
    setInterval(function(){
        actionTo();
    }, 30);
    //窗口变化时
    $(window).resize(function(){
        canvasPage3.width = $(window).width();
        canvasPage3.height = $(window).height();
    });
	//canvasPage3.onmousemove
    canvasPage3.onmousemove = function (event) {
        event = event || window.event;
        zhongX = event.offsetX;
        zhongY = event.offsetY;
    }
	//ballAndMouse
    function ballAndMouse(obj) {
        var disX = Math.abs(zhongX - obj.x);
        var disY = Math.abs(zhongY - obj.y);
        return Math.sqrt(disX * disX + disY * disY);
    }
	//ballAndBall
    function ballAndBall(obj1, obj2) {
        var disX = Math.abs(obj1.x - obj2.x);
        var disY = Math.abs(obj1.y - obj2.y);
        return Math.sqrt(disX * disX + disY * disY);
    }
</script>
</body>
</html>